<template>
    <div :class="['container', hasTopBorder && 'cell-top-border', hasBottomBorder && 'cell-bottom-border']">
        <div class="cell-title">
            <div style="flex-direction: row;">
                <text  style="color:#ff5d54;font-size:32px;">{{label}}</text>
                <text class="cell-title-t" :style="MtitleTextStyle">{{title}}</text>
            </div>
        </div>

        <div  class="cell-input" @click="pickDate">
            <input  type="text" class="cell-input-i" disabled="true" :value="value" @input="getVal"/>
        </div>
    </div>
</template>

<style scoped>

    .container{
        flex-direction: row;
        background-color: white;
        height: 90px;
    }

    .cell-title{
        align-items: center;
        justify-content: flex-start;
        width: 300px;
        flex-direction: row;
        padding-left: 15px;
    }

    .cell-title-t{
        font-size: 32px;
        color: #272727;
    }

    .cell-input{
        height:100%;
        justify-content: flex-end;
        align-items: flex-end;
        width:450px;
        height: 90px;
    }

    .cell-input-i{
        text-align: left;
        padding-right:20px;
        height:100%;
        font-size: 32px;
        width:450px;
        text-align: right;
        color: #666;
    }


    .cell-top-border {
        border-top-color: #e2e2e2;
        border-top-width: 1px;
    }

    .cell-bottom-border {
        border-bottom-color: #e2e2e2;
        border-bottom-width: 1px;
    }

</style>
<script>
    const picker = weex.requireModule('picker')

    let dateTimePicker=weex.requireModule('timepicker')


    export default {
        props:{
            hasBottomBorder:{
                type:Boolean,
                default:true
            },
            hasTopBorder:{
                type:Boolean,
                default:false
            },
            label:{
                type:String,
                default:''
            },
            title:{
                type:String,
                default:''
            },
            value:{
                type:String,
                default:''
            }

        },
        components: {},
        data: {
            checkedDate:'',
            checkedTime:''
        },
        methods: {
            pickDate() {


                var self = this
                picker.pickDate({
                    value: this.checkedDate
                }, event => {
                    if (event.result === 'success') {
                        self.checkedDate = event.data
                        setTimeout(function () {
                            self.pickTime()
                        },500)

                    }
                })

            },
            pickTime() {
                this.checkTime = this.checkTime ? this.checkTime:'00:00:00'

                picker.pickTime({
                    value: this.checkTime
                }, event => {
                    if (event.result === 'success') {
                        this.checkedTime = event.data
                        this.value = `${this.checkedDate} ${this.checkedTime}:00`
                        this.$emit('getVal',this.value)
                    }
                })
            }
        }
    };
</script>